<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>张娜娜-前端开发简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
      /* 分页代码 */
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
      object-fit: contain;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }
    @media print {
      #skills{display:none;}
    }


    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs {}

    .jobs>h2 {}

    .jobs>ol {}

    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h3,
      .jobs header >h4,
      .jobs header >span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>张娜娜</h1>
      <img src="./images/znn.png" alt="" width="100" height="120">
      <p>
        女 | 24岁 | 前端开发工程师 | 合肥
      </p>
      <p>
        手机：18156466003 | 微信：Desire-966 | 邮箱：614556279@qq.com
      </p>
    </section>

    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>nana-log</h3>
            <span>
              <a target="_blank" href="https://github.com/zhanana/nana-log">源码链接</a>
              <a target="_blank" href="https://zhanana.github.io/nana-log-website">项目预览</a>
            </span>
          </header>

          <p>
            这是一款基于 <strong>Vue 2</strong> / <strong>TypeScript</strong> 的简易快速记账本。
          </p>
          <p>灵感来源：想要记录我自己每天大概的收入和支出，能对自己的经济状况一目了然。</p>
          <p>
            利用 <strong>Vuex</strong> 集中式存储管理应用的所有组件的状态的优点，集中管理数据的增删查功能，使项目简练。
          </p>
          <p>
            项目中用到 <strong>Vue Router</strong>路由和 <strong>LocalStorage</strong>存储数据记录。
          </p>
        </li>
         <li>
          <header>
            <h3>自制导航首页</h3>
            <span>
              <a target="_blank" href="https://github.com/zhanana/demo-5m">源码链接</a>
              <a target="_blank" href="https://zhanana.github.io/demo-5m/src/index.html">项目预览</a>
            </span>
          </header>
          <p>
            一个简单的应用 <strong>导航首页</strong> 页面。
          </p>
          <p>
            用户可以自己增加经常进入的网站页面，更加快捷。
          </p>
        </li>
        <li>
          <header>
            <h3>简易画板</h3>
            <span>
              <a target="_blank" href="https://github.com/zhanana/canvas-demo1">源码链接</a>
              <a target="_blank" href="https://zhanana.github.io/canvas-demo1/src/index.html">项目预览</a>
            </span>
          </header>
          <p>自学 <strong>Canvas</strong> 期间做的一个小作品。</p>
          <p>灵感来源：想要随时随地涂涂画画。也可以作为一个放松自己的小玩具。</p>
        </li>
      </ol>
    </section>


    <section class="skills">
      <h2>技能</h2>
      <div class="wrapper">
        <div id="skills"></div>
        <ul>
          <li>熟悉页面制作技巧，能将设计稿<strong>还原</strong> </li>
          <li>熟悉<strong>前后端分离</strong>技术，包括 前端路由、Cookie、Session 等</li>
          <li>熟悉<strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
          <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
          <li>了解 <strong>TypeScript</strong></li>
        </ul>
      </div>
    </section>

    <section class="jobs">
      <h2>工作经历</h2>
      <ol>
        <li>
          <header>
            <h3> 杭州澳比网络科技有限公司 </h3>
            <span><time>2020年7月</time>~<time>2021年3月</time></span>
          </header>
        </li>
      </ol>
    </section>

    <section class="others">
      <h2>其他链接</h2>
      <ul>
        <!-- <li><a href="https://juejin.cn/user/3658778052140568">我的博客</a>，目前已有 10 篇技术文章</li> -->
        <li><a href="https://github.com/zhanana">我的 GitHub</a>，过去三个月有 130 次提交</li>
      </ul>
    </section>

    <section class="education">
      <h2>教育经历</h2>
      <p>
        <span><time>2016年</time>~<time>2020年</time></span>
        | 杭州师范大学 | 信息与计算科学 | 本科
      </p>
      <p>
        专业成绩排名前30% | 担任团支书 | 院学生会干事
      </p>
      <p>
        CET4 | 浙江省计算机二级 | 普通话二乙 | 三等奖学金
      </p>
    </section>

  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>
